<template>
	<div class="page log">
		<div class="full-box log-content">
			<div class="top">
				<el-button type="primary" round @click="handleAddLog">添加系统日志</el-button>
			</div>
			<el-table :data="tableData" border height="100%" v-loading="loading">
				<el-table-column label="更新时间" prop="add_time" width="150px"></el-table-column>
				<el-table-column label="版本号" prop="version" width="80px"></el-table-column>
				<el-table-column label="更新内容" prop="content"></el-table-column>
				<el-table-column label="备注" prop="remark"></el-table-column>
				<el-table-column label="操作" width="150px" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" round @click="handleEditLog(scope.row)">修改</el-button>
						<el-button type="danger" size="mini" round plain @click="deleteLog(scope.row.update_log_id)">删除</el-button>
					</template>
				</el-table-column>
				<default-img slot="empty"></default-img>
			</el-table>
		</div>
		
		<el-dialog :title="dia.title" :visible="dia.show" width="50%" :before-close="handleClose">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="版本号：" prop="version">
					<el-input v-model="form.version" placeholder="请输入版本号"></el-input>
				</el-form-item>
				<el-form-item label="更新内容：" prop="content">
					<el-input type="textarea" v-model="form.content" placeholder="请填写更新内容"></el-input>
				</el-form-item>
				<el-form-item label="备注：" prop="remark">
					<el-input type="textarea" v-model="form.remark" placeholder="请填写备注"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain @click="handleClose">取消</el-button>
					<el-button type="primary" @click="handleConfirm">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { apiGetLog, apiAddLog, apiEditLog, apiDeleteLog } from '@/api'
	export default{
		data(){
			return{
				loading: false,
				tableData: [],
				
				dia:{
					title: '',
					show: false,
				},
				
				form:{
					update_log_id: '',
					version: '',
					content: '',
					remark: ''
				},
				rules:{
					version: [{ required: true, message: '请输入更新版本号', trigger: 'blur' }],
					content: [{ required: true, message: '请填写更新内容', trigger: 'blur' }],
					remark: [{ required: true, message: '请填写更新备注', trigger: 'blur' }]
				}
			}
		},
		created() {
			this.getLog();
		},
		methods:{
			handleAddLog(){
				this.dia.title = '添加';
				this.dia.show = true;
			},
			handleEditLog(row){
				for(let key in this.form){
					if(this.form.hasOwnProperty(key)){
						this.form[key] = row[key]
					}
				}
				console.log(this.form);
				this.dia.title = '修改';
				this.dia.show = true;
			},
			handleClose(){
				this.form = this.$reset(this, 'form');
				this.dia.show = false;
			},
			
			handleConfirm(){
				this.$refs.form.validate(res => {
					if(res){
						if(this.dia.title === '修改'){
							this.editLog();
						}else if(this.dia.title === '添加'){
							this.addLog();
						}
					}else{
						this.$message.error('请确认填写正确！')
					}
				})
			},
			
			getLog(){
				this.loading = true;
				let obj = {
					page_num: 1,
					size: 1000
				}
				apiGetLog(obj).then(res => {
					if(res.data.code == 0){
						this.tableData = res.data.data.data_list;
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			addLog(){
				apiAddLog(this.form).then(res => {
					if(res.data.code == 0){
						this.$message.success('添加成功！');
						this.getLog();
						this.handleClose();
					}
				})
			},
			editLog(){
				apiEditLog(this.form).then(res => {
					if(res.data.code == 0){
						this.$message.success('修改成功！');
						this.getLog();
						this.handleClose();
					}
				})
			},
			deleteLog(id){
				this.$confirm('确定删除该日志?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					apiDeleteLog({update_log_id: id}).then(res => {
						if(res.data.code == 0){
							this.$message.success('删除成功！');
							this.getLog();
						}
					})
				})
			},
		}
	}
</script>

<style scoped>
	.log{
		padding: 12px;
	}
	.log-content{
		display: flex;
		flex-direction: column;
		padding: 12px;
		background-color: #fff;
		border-radius: 4px;
	}
	.top{
		flex: 0;
		padding: 6px 0;
		margin-bottom: 12px;
	}
</style>
